<template>
<div>
  <Header></Header>
   <div class="main">
    <h1 style="margin-bottom: 30px">用户信息页面</h1>
    <el-tabs :tab-position="tabPosition" id="tabs">
      <el-tab-pane label="个人信息">
        <div style="margin-left: 40px">
          <h2 style="margin-bottom: 30px">个人信息</h2>
          <table style="width: 300px" class="info">
            <tbody style="width: 100%">
              <tr>
                <td >会员昵称</td>
                <td >
                  {{ userInfo.user_name }}
                </td>
              </tr>
              <tr>
                <td >手机号</td>
                <td >
                  {{ userInfo.user_phone }}
                </td>
              </tr>
              <tr>
                <td >邮箱</td>
                <td >
                  {{ userInfo.user_email }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="我的订单">
        <div class="order" style="margin-left: 30px;width:100%;padding:15px">
          <h2 style="margin-bottom:30px">我的订单</h2>
          <div  style="display:flex;width:100%;margin-bottom:15px;" class="desc">
            <p style="width:100px">订单号</p>
            <p style="width:200px">下单时间</p>
            <p style="width:200px">名称</p>
            <p>总价</p>
          </div>         
          <ul >
            <li v-for="items in orderInfo" :key="items.order_id" style="display:flex;padding:15px"> 
                <p style="width:80px"> {{items.order_id}} </p>
                <p style="width:200px">{{items.ordered_time}}</p>
                <p style="width:200px;margin-right:30px">{{items.line_name + "："+items.line_journey || items.scenic_name}}</p>
                <p style="margin-right:50px">{{items.total_price}}</p>
                <el-button @click="del(items.order_id)" type="danger" icon="el-icon-delete"></el-button>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="账户安全">账户安全</el-tab-pane>
      <el-tab-pane label="退出">
        <el-button @click="exit">退出</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
  <Footer></Footer>

</div>
</template>

<script>
import Header from '../components/MyHeader.vue'
import Footer from '../components/MyFooter.vue'

import { delOrder, getOrderListyUserId } from "@/api";
export default {
  components:{
    Header,Footer
  },
  data() {
    return {
      userInfo: {},
      tabPosition: "left",
      orderInfo:[]
    };
  },
  mounted() {
    this.getUser();
    this.getOrder()
  },
  methods: {
     // 页面单独刷新一次
    refresh() {
      // console.log('刷新');
      this.$router.replace({path: this.$route.path})
    },
    del(id) {      
     this.$confirm('确定删除？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '删除',
          cancelButtonText: '放弃'
        })
          .then(async () => {
            const res = await delOrder({ orderId: id })
            // console.log('删除订单', res);
            if(res.data.code === 200) {
              this.$message.warning('删除成功')
              this.getOrder()
            }
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: '放弃删除'
            })
          });
    },
    exit() {
      this.$confirm('要离开了吗?', {
          confirmButtonText: '狠心离开',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // session
          sessionStorage.setItem("user", "");
          // vuex
          this.$store.commit('resetUser', {})
          this.refresh()
          this.$message({
            type: 'success',
            message: 'ヾ(￣▽￣)Bye~Bye~!'
          });
          this.$router.push('/')
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '感谢陪伴'
          });          
        });     
    },
    getUser() {
      // session
      // let  user = sessionStorage.getItem('user')
      // this.userInfo = JSON.parse(user)

      // vuex
      let user = this.$store.state.userInfo
      this.userInfo = user
      // console.log("userInfo:", this.userInfo);
    },
    async getOrder() {
      const res = await getOrderListyUserId({userId: this.userInfo.user_id})
      // console.log('用户ID查询订单列表', res);
      this.orderInfo = res.data.data
      // console.log(this.orderInfo);
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 1200px;
  margin: 0 auto;
  padding: 50px;
  background-color: #d2e3f1;
  color: #666;
  .info {
    td {
      text-algin: center;
      padding: 15px;
    }
  }
 .desc{
    p { width: 150px;}
    border-bottom: 1px  black dashed ;
    padding: 15px;
 }
}
</style>
<style lang="scss">
.el-tabs__header .is-left {
font-size: large;
width: 200px;

}
</style>